<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <fmt:setBundle basename="ApplicationMessage" />
  <fmt:setLocale value="zh_CN" />

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <title>添加租约 - 租房宝金融管理平台</title>
</head>
<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>
  
  <div class="web-g-main">

    <%@ include file="/WEB-INF/include/aside.jsp"%>
    <div class="content">
      <header class="header clearfix">
          <h3 class="pull-left">添加租约</h3>
       </header>

       <c:if test="${not empty infoMessage}">
            <div class="alert alert-success alert-dismissable alert-fade top-margin-10 text-align-center">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <i class="glyphicon glyphicon-info-sign"></i>&nbsp;&nbsp;
              <fmt:message key="${infoMessage}" />
            </div>
       </c:if>

       <form id="contractCreate" class="form-horizontal" method="post" action="${ctx}/contracts" data-validate="true">
       
       <div class="row">
         <div class="col-xs-12">
           <div class="panel panel-default feature-panel customer">
           
             <div class="panel-heading">
               <h3 class="panel-title">租客信息</h3>
             </div>
             
             <div class="panel-body">
             
               <div class="form-group demo2do-form-group">
               
                 <label class="col-xs-2 control-label">租客名称</label>
                 <div class="col-xs-4">
                   <input type="text" class="form-control" name="name" data-validate="required">
                 </div>
                 
                 <label class="col-xs-2 control-label">租客账号</label>
                 <div class="col-xs-4">
                   <input type="text" class="form-control" name="account" data-validate="required">
                 </div>
                 
               </div>
              
               <div class="form-group demo2do-form-group">
               
                 <label class="col-xs-2 control-label">手机号</label>
                 <div class="col-xs-4">
                   <input type="text" class="form-control" name="mobile" data-validate="phone">
                 </div>
                 
                 <label class="col-xs-2 control-label">城市</label>
                 <div class="col-xs-2">
                   <select class="form-control province">
                     <option>浙江</option>
                     <option>安徽</option>
                     <option>江苏</option>
                     <option>四川</option>
                     <option>湖北</option>
                   </select>
                 </div>
                 <div class="col-xs-2">
                   <select class="form-control city">
                       <option>杭州</option>
                       <option>嘉兴</option>
                       <option>台州</option>
                       <option>温州</option>
                       <option>湖州</option>
                   </select>
                 </div>
                 
               </div>
               
             </div> <!-- end panel-body -->
             
           </div><!-- end panel  -->
           
         </div><!-- end col  -->
         
       </div><!-- end row  -->
       
       <div class="row">
         <div class="col-xs-12">
           <div class="panel panel-default feature-panel house">
           
             <div class="panel-heading">
               <h3 class="panel-title">房源信息</h3>
             </div>
             
             <div class="panel-body">
             
               <div class="form-group demo2do-form-group">
               
                 <label class="col-xs-2 control-label">房源名称</label>
                 <div class="col-xs-4">
                   <input type="text" class="form-control" name="community" data-validate="required">
                 </div>
                 
                 <label class="col-xs-2 control-label">房源面积</label>
                 <div class="col-xs-2">
                   <input type="text" class="form-control" name="bulidArea" data-validate="number">
                 </div>
                 
               </div>
              
               <div class="form-group demo2do-form-group">
               
                 <label class="col-xs-2 control-label">房源装修</label>
                 <div class="col-xs-4">
                   <select class="form-control HouseType">
                     <option value="0">毛坯</option>
                     <option value="1">简装</option>
                     <option value="2">精装</option>
                   </select>
                 </div>
                 
                 <label class="col-xs-2 control-label">房源房型</label>
                 <div class="col-xs-2">
                   <select class="form-control room">
                     <option value="1">1室</option>
                     <option value="2">2室</option>
                     <option value="3">3室</option>
                     <option value="4">4室</option>
                     <option value="5">5室</option>
                   </select>
                 </div>
                 <div class="col-xs-2">
                   <select class="form-control hall">
                       <option value="0">0厅</option>
                       <option value="1">1厅</option>
                       <option value="2">2厅</option>
                       <option value="3">3厅</option>
                       <option value="4">4厅</option>
                     </select>
                 </div>
                 
               </div>
               
               <div class="form-group demo2do-form-group house-address">
               
                 <label class="col-xs-2 control-label">房源地址</label>
                 
                 <div class="col-xs-2">
                   <select class="form-control province">
                     <option>浙江</option>
                     <option>安徽</option>
                     <option>江苏</option>
                     <option>四川</option>
                     <option>湖北</option>
                   </select>
                 </div>
                 <label class="col-xs-1 control-label text-left">省</label>
                 
                 <div class="col-xs-2">
                   <select class="form-control city">
                       <option>乌鲁木齐</option>
                       <option>嘉兴</option>
                       <option>台州</option>
                       <option>温州</option>
                       <option>湖州</option>
                  </select>
                 </div>
                 <label class="col-xs-1 control-label text-left">市</label>
                 
                 <div class="col-xs-3">
                   <select class="form-control area">
                       <option>杭州</option>
                       <option>嘉兴</option>
                       <option>台州</option>
                       <option>温州</option>
                       <option>湖州</option>
                  </select>
                 </div>
                 <label class="col-xs-1 control-label text-left">区</label>
                 
               </div>
               
               <div class="form-group demo2do-form-group house-address">
                 
                 <label class="col-xs-2 control-label">详细</label>
                 
                 <div class="col-xs-10">
                   <input type="text" class="form-control" name="communityDetail" >
                 </div>
                 
                 
               </div>
               
             </div> <!-- end panel-body -->
             
           </div><!-- end panel  -->
           
         </div><!-- end col  -->
         
       </div><!-- end row  -->
       
       <div class="row">
         <div class="col-xs-12">
           <div class="panel panel-default feature-panel contract">
           
             <div class="panel-heading">
               <h3 class="panel-title">合同信息</h3>
             </div>
             
             <div class="panel-body">
               
               <div class="form-group demo2do-form-group">
                 <label class="col-xs-2 control-label">合同编号</label>
                 <div class="col-xs-4">
                   <div class="input-group">
                     <input name="contractNo" type="text" class="form-control">
                   </div>
                 </div>
               </div>
               
               <div class="form-group demo2do-form-group">
                 
                 <label class="col-xs-2 control-label">租期</label>
                 <div class="col-xs-4">

                   <div class="input-daterange input-group" id="rentDate">
                       <input type="date" class="form-control" name="start" />
                       <span class="input-group-addon">至</span>
                       <input type="date" class="form-control" name="end" />
                   </div>
                 </div>
                 
                 
                 
                 <label class="col-xs-2 control-label">服务商</label>
                 <div class="col-xs-2">
                   <select class="form-control apps">
                     <option value="1">小寓科技</option>
                   </select>
                 </div>
                 
               </div>
              
               <div class="form-group demo2do-form-group">
               
                 <label class="col-xs-2 control-label">月租金</label>
                 <div class="col-xs-4">
                   <div class="input-group">
                     <input name="monthFee" type="text" class="form-control" data-validate="number">
                     <span class="input-group-addon">每月</span>
                   </div>
                 </div>
                 
                 <label class="col-xs-2 control-label">付款方式</label>
                 <div class="col-xs-4">
                   <select class="form-control paymentInstrument">
                     <option value="0">付一押一</option>
                     <option value="1">付三押一</option>
                     <option value="2">半年一付</option>
                   </select>
                 </div>
                 
               </div>
               
             </div> <!-- end panel-body -->
             
           </div><!-- end panel  -->
           
         </div><!-- end col  -->
         
       </div>
       
       <div class="row text-center vertical-margin-20"> 
       
         <button id="submit" type="submit" class="btn btn-success btn-shadow btn-shadow-success demo2do-btn">添加租约</button>&nbsp;&nbsp;&nbsp;&nbsp;
         <button type="button" class="btn btn-default btn-shadow btn-shadow-default demo2do-btn" data-dismiss="modal">取消添加</button>
     
       </div>
       
       </form>

       <%@ include file="/WEB-INF/include/footer.jsp"%>
       
    </div>

  </div>
  

  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datepicker.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datepicker.zh-CN.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.en.js"></script>
  <script src="${ctx.resource}/js/bootstrap-alert-fade-trigger.js"></script>
  <script src="${ctx.resource}/js/bootstrap.validate.trigger.js"></script>
  <script> 
    $(document).ready(function() {
      $('#rentDate').datepicker({
        format: "yyyy-mm-dd",
        startDate: "new Date()",
        todayBtn: "linked",
        language: "zh-CN",
        orientation: "top left",
        autoclose: true,
        todayHighlight: true
      });
      
      $("#submit").bind('click', function(event) {

        event.preventDefault();
        
        $.post("${ctx}/contracts/add",
    				{
                      name:     $(".customer input[name='name']").val(),
                      mobile:   $(".customer input[name='mobile']").val(),
                      account:  $(".customer input[name='account']").val(),
                      city:     $(".customer select.city").val(),
                      province: $(".customer select.province").val(),    //customer
                      community:       $(".house input[name='community']").val(),
                      bulidArea:       $(".house input[name='bulidArea']").val(),
                      type:            $(".house select.HouseType").val(),
                      room:            $(".house select.room").val(),
                      hall:            $(".house select.hall").val(),
                      houseProvince:   $(".house select.province").val(),
                      houseCity:       $(".house select.city").val(),
                      area:            $(".house select.area").val(),
                      communityDetail: $(".house input[name='communityDetail']").val(),//house
                      monthFee:          $(".contract input[name='monthFee']").val(),
                      begin:         $("#rentDate input[name='start']").val(),//contract
                      end:           $("#rentDate input[name='end']").val(),
                      contractNo:    $(".contract input[name='contractNo']").val(),
                      instrument:    $('.contract select.paymentInstrument').val(),
                      appId: 	   	 $(".contract select.apps").val()   
    				},function(jsonData){
    				  	var param=$.parseJSON(jsonData);
    				  	if(param.code == 0){
    				  		window.location.href="${ctx}"+"/"+param.data.url;
    				  	}else {
    				  		alert(param.message);
    				  	}
    					
    				});
    	});

    });
    
    
    
  </script>
  
</body>
</html>
